<template>
	<view class="mainpadding">
		<view class="pdl">
			<view class="hei_text main_size bold" style="font-size: 40rpx;">商品名稱商品名稱商品名稱</view>
			<view class="xiaohui titletext margin_top2 flexbetween">
				<text>尺寸：15*15</text>
				<text>用量：155才</text>
			</view>
			<view class="flexbetween">
				<view class="xiaolan margin_top2">規格：<text
						class="margin_right1">加熱*3&nbsp;&nbsp;&nbsp;</text>
				</view>
				<view class="xiaohong titletext">數量:*5</view>
			</view>
		</view>
		<view class="borderhuang margin_top2 margin_left1 flexleft radius" style="padding: 13rpx;">
			<view class="xiaohei titletext" style="min-width: 90rpx;">回報數量：</view>
			<input type="number" class="xiaohong main_size" />
		</view>
		<view class="mainpadding_top flexbetween shadow ffffff radius">
			<view class="flexleft">
				<image src="../../static/image/system/wenjian.png" style="width: 56rpx;height: 56rpx;"
					mode="">
				</image>
				<view class="titletext hei_text bold margin_left">客戶文件</view>
			</view>
			<view class="flexright">
				<view class="listbtnhuang margin_left2" @click="downfile()">立即下載</view>
			</view>
		</view>
		
		<view class="margin_top2 flexbetween margin_left1 flexleft radius" style="padding: 13rpx;">
			<view class="xiaohei titletext" style="min-width: 90rpx;">轉檔</view>
			<view class="toprightbtn">上傳檔案</view>
		</view>
		<view class="flexbetween ffffff mainpadding margin_top2 radius shadow">
			<view class="main_size bold hei_text">圖片</view>
			<view class="flexleft">
				<view class="positionr margin_right1" v-for="(item,index) in image_text" :key="index">
					<image class="listleftimg radius" :src="item" mode=""></image>
					<view class="deleteimg" @click="removeImg(image,image_text,index)"></view>
				</view>
				<image class="listleftimg radius" src="@/static/image/system/upimg.png" mode=""
					v-if="image_text.length<1" @click="uploadImg(image,image_text,1)"></image>
			</view>
		</view>
		<view class="submitbtn margin_top2">確定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image_text:[],
				image:[],
			}
		},
		methods: {
			// 下载文件
			downfile(item) {
				var that = this
				//加载框动画
				uni.showLoading({
					title: '正在下載……'
				});
				uni.downloadFile({
					url: this.imgUrlUser + item.addimage, //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//隐藏加载框
							uni.hideLoading();
							//文件保存到本地
							// #ifdef H5
							const a = document.createElement('a');
							a.href = data.tempFilePath; //filePath 这里的地址是 uni.downloadFile 中的返回值里的地址
							a.download = ""; // 可以设置下载文件名，如果是空字符串，则使用服务器端设置的文件名
							a.click();
							// #endif
							// #ifdef MP-WEIXIN
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'success',
										mask: true,
										// title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下載成功',
										duration: 2000,
									});
									//自动打开文档查看
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											showMenu: true,
											success: function(res) {}
										});
									}, 2000)
								}
							});
							// #endif
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件下載失敗',
						});
					},
				});
			},
		}
	}
</script>

<style>
.borderhuang {
		border: 1rpx solid #feb800;
	}
	.listleftimg{
		width: 400rpx;
		height: 400rpx;
	}
</style>
